লারাভেল Blade Templates: বিস্তারিত গাইড উদাহরণসহ

Blade লারাভেলের টেম্পলেট ইঞ্জিন, যা HTML তৈরির জন্য ব্যবহৃত হয়। এটি ডাইনামিক কন্টেন্ট তৈরি করতে সাহায্য করে এবং কোড লেখার প্রক্রিয়াকে সহজ করে তোলে। নিচে Blade Templates-এর বিভিন্ন দিক ও উদাহরণসহ আলোচনা করা হলো।

১. ব্লেড পরিচিতি

Blade টেম্পলেট ইঞ্জিন লারাভেলের সাথে ডাইনামিক কন্টেন্ট তৈরি করতে ব্যবহৃত হয়। Blade-এর সাহায্যে কোড লেখার প্রক্রিয়া অনেক সহজ হয়।

ব্লেড হল লারাভেলের ডিফল্ট টেম্পলেট ইঞ্জিন। এটি HTML ডাইনামিকভাবে তৈরি করতে ব্যবহৃত হয় এবং এর কিছু প্রধান বৈশিষ্ট্য হল:

• ডাইনামিক কন্টেন্ট: Blade টেম্পলেটের মাধ্যমে ডেটা সহজে প্রদর্শন করা যায়।
• ডিরেকটিভ: Blade ডিরেকটিভগুলি যেমন @if, @foreach, @extends, ইত্যাদি ব্যবহার করে লজিকাল স্ট্রাকচার তৈরি করতে সহায়তা করে।
• এনকোডিং: Blade স্বয়ংক্রিয়ভাবে ডেটা HTML এনকোড করে, যা নিরাপত্তার জন্য গুরুত্বপূর্ণ।

২. Supercharging Blade With Livewire

Livewire একটি প্যাকেজ যা Blade টেম্পলেটগুলোর কার্যকারিতা বাড়ায়। উদাহরণস্বরূপ:

// Livewire Component
class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Blade টেম্পলেটে ব্যবহার:

<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">Increase</button>
</div>

৩. Displaying Data (ডেটা প্রদর্শন)

Blade-এ ডেটা প্রদর্শন করতে {{ }} সিম্বল ব্যবহার করুন:

<h1>{{ $title }}</h1>

যেখানে $title হচ্ছে কন্ট্রোলার থেকে পাস করা ডেটা।

৪. HTML Entity Encoding

Blade স্বয়ংক্রিয়ভাবে ডেটা এনকোড করে, যা নিরাপত্তার জন্য গুরুত্বপূর্ণ। তবে, HTML রেন্ডার করতে চাইলে {!! !!} ব্যবহার করুন:

{!! $htmlContent !!}

এখানে $htmlContent একটি HTML স্ট্রিং।

৫. Blade and JavaScript Frameworks

Blade টেম্পলেটগুলি JavaScript ফ্রেমওয়ার্কের সাথে মিলে কাজ করতে পারে। উদাহরণস্বরূপ, Vue.js ব্যবহার করে:

<div id="app">
    <example-component></example-component>
</div>

এবং app.js ফাইল:

new Vue({
    el: '#app',
});

৬. Blade Directives

Blade ডিরেকটিভগুলি বিভিন্ন কার্যকলাপের জন্য ব্যবহৃত হয়। উদাহরণস্বরূপ:

• If Statements:

@if ($user->isAdmin())
    <p>Welcome, Admin!</p>
@endif

• Switch Statements:

@switch($role)
    @case('admin')
        <p>You are an admin.</p>
        @break
    @case('user')
        <p>You are a user.</p>
        @break
    @default
        <p>Guest</p>
@endswitch

৭. Loops (লুপ)

Blade-এ লুপ ব্যবহার করতে পারেন:

@foreach ($items as $item)
    <li>{{ $item }}</li>
@endforeach

এখানে $items হচ্ছে একটি অ্যারে।

৮. The Loop Variable

লুপ চলাকালীন, @foreach এর ভিতরে loop ভেরিয়েবল ব্যবহার করে লুপের তথ্য পাওয়া যায়:

@foreach ($items as $item)
    <p>{{ $loop->iteration }}: {{ $item }}</p>
@endforeach

৯. Conditional Classes

শর্ত সাপেক্ষে ক্লাস যুক্ত করতে:

<div class="{{ $isActive ? 'active' : 'inactive' }}"></div>

এখানে $isActive একটি বুলিয়ান ভেরিয়েবল।

১০. Additional Attributes

অতিরিক্ত অ্যাট্রিবিউট যোগ করতে:

<input type="text" name="name" {{ $attributes }}>

এখানে $attributes অ্যাসোসিয়েটিভ অ্যারে।

১১. Including Subviews

Subview অন্তর্ভুক্ত করতে @include ব্যবহার করুন:

@include('partials.header')

এখানে partials.header একটি Blade ভিউ ফাইল।

১২. The @once Directive

কোনো ব্লক কোড শুধুমাত্র একবার রেন্ডার করতে @once ব্যবহার করুন:

@once
    <script src="script.js"></script>
@endonce

১৩. Raw PHP

Blade-এ কাঁচা PHP কোড ব্যবহার করতে পারেন:

<?php echo $variable; ?>

১৪. Comments

Blade কমেন্ট যোগ করতে:

{{-- This is a comment --}}

১৫. Components

ব্লেড কম্পোনেন্ট একটি পুনঃব্যবহারযোগ্য UI উপাদান তৈরি করতে সহায়তা করে। এটি কম্পোনেন্ট ভিত্তিক আর্কিটেকচার ব্যবহার করে, যা কোডের পুনঃব্যবহারযোগ্যতা এবং পরিষ্কারতা বৃদ্ধি করে।

বৈশিষ্ট্য:

• পুনঃব্যবহারযোগ্যতা: একবার তৈরি করা হলে, একাধিক জায়গায় ব্যবহার করা যায়।
• ডেটা পাস করা: কম্পোনেন্টের মাধ্যমে ডেটা সহজেই পাস করা যায়।
• স্টাইল এবং কার্যকারিতা: কম্পোনেন্টের ভিতরে লজিক ও স্টাইল যুক্ত করা যায়। উদাহরণ:

<!-- resources/views/components/alert.blade.php -->
<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>

ব্যবহার:

<x-alert type="success" message="Operation successful!" />

১৬. Rendering Components

কম্পোনেন্ট রেন্ডার করতে:

<x-alert type="success" message="Operation successful!" />

১৭. Passing Data to Components

কম্পোনেন্টে ডেটা পাঠাতে:

<x-alert :type="$type" :message="$message" />

এখানে $type এবং $message হচ্ছে ভ্যারিয়েবল।

১৮. Component Attributes

কম্পোনেন্ট অ্যাট্রিবিউটগুলি কাস্টমাইজ করতে:

<x-button :size="$size" class="btn-primary" />

১৯. Reserved Keywords

Blade-এ কিছু রিজার্ভড কীওয়ার্ড রয়েছে, যেমন @if, @foreach, ইত্যাদি। এই কীওয়ার্ডগুলি ব্যবহার করতে পারেন, কিন্তু কাস্টম ডিরেক্টিভ তৈরি করতে গেলে এড়িয়ে চলা উচিত।

২০. Slots

কম্পোনেন্টের জন্য স্লট ব্যবহার করা যায়, যা কাস্টম কন্টেন্টের জন্য উপযুক্ত।

<x-card>
    <x-slot name="header">
        Card Header
    </x-slot>
    Card Body
</x-card>

২১. Inline Component Views

ইনলাইন কম্পোনেন্ট ভিউ তৈরি করতে:

<x-alert>
    <x-slot name="message">
        This is an alert!
    </x-slot>
</x-alert>

২২. Dynamic Components

ডাইনামিক কম্পোনেন্ট তৈরি করতে:

@component($componentName, ['data' => $data])
@endcomponent

এখানে $componentName একটি ভ্যারিয়েবল যা কম্পোনেন্টের নাম ধারণ করে।

২৩. Manually Registering Components

কম্পোনেন্টগুলি ম্যানুয়ালি রেজিস্টার করতে পারেন AppServiceProvider এর boot মেথডে:

Blade::component('alert', AlertComponent::class);

২৪. Anonymous Components

অ্যানোনিমাস কম্পোনেন্ট তৈরি করতে:

<x-alert>
    <p>This is an alert!</p>
</x-alert>

২৫. Anonymous Index Components

অ্যানোনিমাস ইনডেক্স কম্পোনেন্ট ব্যবহার করতে:

<x-alert />

২৬. Data Properties / Attributes

কম্পোনেন্টে ডেটা প্রপার্টি অ্যাক্সেস করতে:

{{ $message }}

২৭. Accessing Parent Data

কম্পোনেন্টের প্যারেন্ট ডেটা অ্যাক্সেস করতে:

{{ $parentData }}

২৮. Anonymous Components Paths

অ্যানোনিমাস কম্পোনেন্টের পাথ কাস্টমাইজ করা যায়।

২৯. Building Layouts

লেনদেন নির্মাণের জন্য Blade-এ লেআউট তৈরি করা যায়। উদাহরণ:

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    @yield('content')
</body>
</html>

এবং একটি ভিউ:

@extends('layouts.app')

@section('content')
    <h1>Welcome to My App</h1>
@endsection

৩০. Layouts Using Components

লেআউট তৈরিতে কম্পোনেন্ট ব্যবহার করতে:

<x-layout>
    // Content here
</x-layout>

৩১. Layouts Using Template Inheritance

টেম্পলেট ইনহেরিটেন্স ব্যবহার করে লেআউট তৈরি করতে:

@extends('layouts.app')

@section('content')
    // Content here
@endsection

৩২. Forms

ফর্ম তৈরি করতে:

<form action="/submit" method="POST">
    @csrf
    <input type="text" name="name">
    <button type="submit">Submit</button>
</form>

৩৩. CSRF Field

CSRF ফিল্ড যোগ করতে:

@csrf

৩৪. Method Field

HTTP মেথড স্পেসিফাই করতে:

@method('PUT')

৩৫. Validation Errors

ভ্যালিডেশন এরর দেখানোর জন্য:

@if ($errors->any())
    <div>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

৩৬. Stacks

স্ট্যাক ব্যবহার করতে:

@push('scripts')
    <script src="script.js"></script>
@endpush

৩৭. Service Injection

সার্ভিস ইনজেকশন করে Blade কম্পোনেন্টে যুক্ত করতে:

use App\Services\MyService;

class MyComponent extends Component
{
    public function __construct(MyService $service)
    {
        // Use the service
    }
}

৩৮. Rendering Inline Blade Templates

ইনলাইন Blade টেমপ্লেট রেন্ডার করতে:

{!! view('inline.template', $data) !!}

৩৯. Rendering Blade Fragments

Blade ফ্রাগমেন্ট রেন্ডার করতে:

{!! render('partials.fragment') !!}

৪০. Extending Blade

Blade সম্প্রসারণ করতে নতুন ডিরেকটিভ তৈরি করতে পারেন:

Blade::directive('myDirective', function ($expression) {
    return "<?php echo 'Hello ' . {$expression}; ?>";
});

৪১. Custom Echo Handlers

কাস্টম ইকো হ্যান্ডলার তৈরি করতে:

Blade::directive('customEcho', function ($expression) {
    return "<?php echo strtoupper($expression); ?>";
});

৪২. Custom If Statements

কাস্টম If স্টেটমেন্ট তৈরি করতে:

Blade::if('active', function ($value) {
    return $value == 'active';
});

লারাভেল ব্লেড এবং কম্পোনেন্টের মধ্যে মূল পার্থক্য হলো:

ব্লেড (Blade)

• টেম্পলেট ইঞ্জিন: লারাভেলের ব্লেড হল একটি টেম্পলেট ইঞ্জিন, যা আপনাকে HTML টেম্পলেট তৈরি করতে এবং PHP কোডের সাথে সহজে কাজ করতে দেয়।
• ডাটা পাসিং: ব্লেডে আপনি ডাটা পাস করতে পারেন এবং এটি খুব সহজে টেম্পলেটের মধ্যে ব্যবহার করতে পারেন।
• নেস্টিং: ব্লেড টেম্পলেটগুলোকে নেস্ট (nest) করা যায়, অর্থাৎ একটি ব্লেড ফাইলের মধ্যে অন্য ব্লেড ফাইল ব্যবহার করা যায়।

কম্পোনেন্ট (Components)

• রিইউজেবল UI অংশ: লারাভেল কম্পোনেন্ট হচ্ছে UI-এর রিইউজেবল অংশ, যা ব্লেড টেম্পলেটের একটি অবজেক্ট হিসেবে কাজ করে।
• প্রপস: কম্পোনেন্টগুলোতে প্রপস (props) পাস করা যায়, যার মাধ্যমে আপনি কম্পোনেন্টের ভিতরে ডাটা ব্যবহার করতে পারেন।
• স্টাইলিং ও লজিক: কম্পোনেন্টের সাথে CSS এবং JavaScript লজিক যুক্ত করা সম্ভব, যা একটি স্বতন্ত্র ইউনিট হিসেবে কাজ করে।

সারসংক্ষেপ

ব্লেড মূলত টেম্পলেট তৈরি করার জন্য ব্যবহৃত হয়, যেখানে কম্পোনেন্ট হলো ব্লেডের সাহায্যে তৈরি করা রিইউজেবল UI ইউনিট। ব্লেডে টেম্পলেটিং করা হয়, আর কম্পোনেন্টে UI লজিক ও স্টাইলিং অন্তর্ভুক্ত করা হয়।

উপসংহার

Blade টেম্পলেট ইঞ্জিন লারাভেলের একটি শক্তিশালী অংশ, যা ডেভেলপারদের জন্য সহজ এবং কার্যকরী উপায়ে ডাইনামিক কন্টেন্ট তৈরি করতে সহায়তা করে। Blade এর বৈশিষ্ট্যগুলি ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরো ব্যবহারকারী-বান্ধব ও কার্যকরী করে তুলতে পারেন। Blade-এর উদাহরণগুলোকে কাজে লাগিয়ে ডেভেলপাররা দ্রুত এবং নিরাপদভাবে সাইট তৈরি করতে সক্ষম হন।